[Day 11] 忘了約prop桑出門

2023 iThome 鐵人賽

DAY 11

Cloud Native

Vue 上雲霄系列第 11 篇

15th鐵人賽

Fish_opera

團隊NUTC_IMAC_WEB_桑貝比

2023-09-26 22:22:35

284 瀏覽

分享至

大家好啊～今天是鐵人賽的第１１天唷！
今天沒有props當子元件的資料傳遞，不但不會出錯，而是會直接將外層class內容給DOM。

<div id="app">
    <!-- 用v-bind傳入className -->
     <example-component :class="className"></example-component>
</div>

const app = Vue.createApp({
    data() {
        return {
            className: 'block'
        }
    }
});
app.component('example-component', {
    template: `<div class="child-app"></div>`,
});
app.mount('#app');

需要注意的點是屬性傳遞與繼承，只能在子元件是唯一根節點，當子元件有多個根節點時，Vue不知道該將屬性給哪一個節點，就會報錯。

app.component('example-layout', {
    template: `
        <header>...</header>
        <body>...</body>
        <footer>...</footer>`
});

//在某標籤加入v-bind後即可。
app.component('example-layout', {
    template: `
        <header>...</header>
        <body v-bind="$attrs">...</body>
        <footer>...</footer>`
});

不希望屬性被子元件繼承，則可加入inheritAttrs：false。

app.component('example-layout', {
    inheritAttrs: false,
    template: `
        <header>...</header>
        <body v-bind="$attrs">...</body>
        <footer>...</footer>`
});

以上為今天的內容，感謝各位。明天見囉～